<template>
	<scroll-view class="container" scroll-y="true">
		<view class="tit">
			<text>二维码绑定</text>
		</view>
		<view class="list">
			<view class="list_item">
				<view class="left">
					类型
				</view>
				<view class="right">
					<text>柜子</text>
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list_item">
				<view class="left">
					操作
				</view>
				<view class="right" @click="caozuo">
					<text v-if="ischeck === '1'">认领</text>
					<text v-if="ischeck === '2'">设置分成</text>
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="tit">
			<text>绑定内容</text>
		</view>

		<view class="list" v-if="ischeck === '1'">
			<view class="list_item">
				<view class="left">
					机柜编号
				</view>
				<view class="right">
					<text>{{bianhao}}</text>
				</view>
			</view>
			
			<view class="list_item">
				<view class="left">
					机柜名称
				</view>
				<view class="right">
					<input type="text" value="" v-model="name" placeholder="请输入"/>
				</view>
			</view>
			
			<view class="list_item">
				<view class="left">
					电池数量
				</view>
				<view class="right">
					<input type="number" v-model="battery_num" placeholder="请输入"/>
				</view>
			</view>
			
			<view class="list_item">
				<view class="left">
					浮板数量
				</view>
				<view class="right">
					<input type="number" v-model="fuban_num" placeholder="请输入"/>
				</view>
			</view>
		</view>
		
		<view class="list" v-if="ischeck === '1'">
			<view class="list_item">
				<view class="left">
					安装城市
				</view>
				<view class="right" @click="showAddress">
					{{ places.length ? places.join('-') : '请选择地点'}}
				</view>
			</view>
			
			<view class="list_item">
				<view class="left">
					详细地址
				</view>
				<view class="right">
					<input type="text" v-model="address" placeholder="请输入"/>
				</view>
			</view>
			
			<view class="list_item">
				<view class="left">
					分段收费
				</view>
				<view class="right">
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view class="news" v-if="ischeck === '1'">
			<!-- <view class="new_item" v-for="(item,index) in list" :key="item.id">
				<input type="number" value="" v-model="item.free_time" @blur="blur(item.date,index,'date')" />
				<text>分钟以内</text>
				<input type="number" value="" v-model="item.money" @blur="blur(item.money,index,'money')" />
				<text>元/小时</text>
				<image src="/static/img/agent/minus.png" mode="widthFix" @click="minus(index)"></image>
			</view> -->
			<view class="new_item">
				<text></text>
				<input type="number" value="" v-model="free_time" />
				<text>分钟以内免费</text>
			</view>
			<view class="news_tip">
				第一阶段收费
			</view>
			<view class="new_item">
				<text></text>
				<input type="number" value="" v-model="fee_first_time" />
				<text>分钟</text>
				<input type="number" value="" v-model="fee_first_money"/>
				<text>元</text>
			</view>
			<view class="news_tip">
				第二阶段收费
			</view>
			<view class="new_item">
				<text>每</text>
				<input type="number" value="" v-model="fee_time" />
				<text>分钟</text>
				<input type="number" value="" v-model="fee_money"/>
				<text>元</text>
			</view>
		</view>

		<view class="list" v-if="ischeck === '2'">
			<view class="list_item">
				<view class="left">
					手机号码
				</view>
				<view class="right">
					<input type="number" value="" v-model="mobile" placeholder="请输入"/>
				</view>
			</view>
			<view class="list_item">
				<view class="left">
					分成方式
				</view>
				<view class="right">
					<text>按比例</text>
				</view>
			</view>
			<view class="list_item">
				<view class="left">
					分成比例
				</view>
				<view class="right">
					<input type="text" value="" placeholder="请输入分成比例" v-model="fencheng_rate" />
					<text>%</text>
				</view>
			</view>
		</view>


		<view class="btn">
			<button type="default" @click="save">确认</button>
		</view>


		<view class="mask" v-if="operation" @click="cencl">
			<view class="operation" @click.stop="!cencl">
				<view class="radio">
					<radio value="r1" :checked="ischeck === '1'" color="#34ACEF" @click="radio('1')" />
					<text @click="radio('1')">认领</text>
				</view>
				<view class="radio">
					<radio value="r2" :checked="ischeck === '2'" color="#34ACEF" @click="radio('2')" />
					<text @click="radio('2')">设置分成</text>
				</view>
			</view>
		</view>
	<jc-address-picker :level='level' :places='places' :visible.sync='visible' @change='change'></jc-address-picker>
	</scroll-view>
</template>

<script>
	import jcAddressPicker from '@/components/jc-address-picker/jc-address-picker.vue'
	import {
		getDevice,
		bindMent,
		setRate
	} from '../../../api/api.js'
	export default {
		components: {
			jcAddressPicker
		},
		data() {
			return {
				operation: false,
				visible: false,
				places:[],
				level: 3,
				ischeck: '1',
				// list: [],
				code: '',
				name: '',
				bianhao: '',
				address: '',
				fee_rate: '',
				battery_num:'',
				fuban_num:'',
				fee_time:'',
				free_time:'',
				fee_money:'',
				mobile:'',
				fencheng_rate:'',
				fee_first_time:'',
				fee_first_money:''
			}
		},
		onLoad(options) {
			this.code = options.code
			this.mentDetail()
		},
		methods: {
			mentDetail() {
				getDevice({
					code: this.code
				}).then(res => {
					this.bianhao = res.data.code
					this.name = res.data.name
					this.address = res.data.address
					this.battery_num = res.data.battery_num
					this.fuban_num = res.data.fuban_num
					this.free_time = res.data.free_time
					this.fee_time = res.data.fee_time
					this.fee_money = res.data.fee_money
					this.fee_first_time = res.data.fee_first_time
					this.fee_first_money = res.data.fee_first_money
					if(res.data.province){
						this.places.push(res.data.province)
					}
					if(res.data.city){
						this.places.push(res.data.city)
					}
					if(res.data.area){
						this.places.push(res.data.area)
					}
					// this.places.push(res.data.city)
					// this.places.push(res.data.area)
				})
			},
			radio(checked) {
				this.ischeck = checked
				this.operation = false
			},
			caozuo() {
				this.operation = true
			},
			cencl(){
				this.operation = false
			},
			add() {
				this.list.push({
					date: '',
					money: ''
				})
			},
			blur(num, index, type) {
				this.list[index][type] = num
			},
			minus(index) {
				this.list.splice(index, 1)
			},
			showAddress() {
				this.visible = true;
			},
			change(data) {
				this.places = data.map(i => i.name);
			},
			save() {
				if (this.ischeck == 1) {
					// let fee_mode = ''
					// for (let i = 0; i < this.list.length; i++) {
					// 	fee_mode += this.list[i].date + '=' + this.list[i].money + ','
					// }
					// fee_mode = fee_mode.substring(0, fee_mode.length - 1)
					console.log(this.places)
					if(!this.name){
						uni.showToast({
							icon: 'none',
							title:'请输入机柜名称'
						})
						return
					}
					if(!this.battery_num){
						uni.showToast({
							icon: 'none',
							title:'请输入电池数量'
						})
						return
					}
					if(!this.fuban_num){
						uni.showToast({
							icon: 'none',
							title:'请输入浮板数量'
						})
						return
					}
					
					if(this.places.length == 0){
						uni.showToast({
							icon: 'none',
							title:'请选择安装城市'
						})
						return
					}
					console.log(this.places)
					
					if(!this.address){
						uni.showToast({
							icon: 'none',
							title:'请输入详细地址信息'
						})
						return
					}
					
					if(!this.free_time || !this.fee_time || !this.fee_money || !this.fee_first_money || !this.fee_first_time){
						uni.showToast({
							icon: 'none',
							title:'请输入分段收费信息'
						})
						return
					}
					
					bindMent({
						code: this.code,
						address: this.address,
						name:this.name,
						free_time: this.free_time,
						fee_time: this.fee_time,
						fee_money: this.fee_money,
						fee_first_time: this.fee_first_time,
						fee_first_money: this.fee_first_money,
						fuban_num: this.fuban_num,
						battery_num: this.battery_num,
						province:this.places[0],
						city:this.places[1],
						area:this.places[2],
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '绑定成功'
							})
							setTimeout(function() {
								console.log(1111)
								uni.switchTab({
									url:'/pages/agent/index'
								})
							}, 500)
						}
					})
				} else if (this.ischeck == 2) {
					if (!this.fencheng_rate) {
						uni.showToast({
							icon: 'none',
							title: '请输入分成比例'
						})
						return
					}

					if (Number(this.fencheng_rate) > 100) {
						uni.showToast({
							icon: 'none',
							title: '分成比例不要大于100'
						})
						return
					}
					setRate({
						code: this.code,
						fencheng_rate: this.fencheng_rate,
						yunying_mobile: this.mobile
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '绑定成功'
							})
							setTimeout(function() {
								uni.switchTab({
									url:'/pages/agent/index'
								})
							}, 500)
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		position: relative;
	}

	.tit {
		height: 80upx;
		line-height: 80upx;
		padding-left: 30upx;
	}

	.list {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 20upx;

		.list_item {
			width: calc(100% - 60upx);
			height: 100upx;
			margin: 0 auto;
			border-bottom: 1upx solid #e9e6e9;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				text {
					font-size: 24upx;
					color: #999;
				}
			}

			.right {
				display: flex;
				align-items: center;
				color: #999999;
				
				input {
					min-width: 250upx;
					text-align: right;
					margin-right: 10upx;
				}

				text {
					font-size: 28upx;
					color: #999999;
				}

				image {
					width: 15upx;
					margin-left: 10upx;
				}
			}

			.img {
				image {
					width: 40upx;
				}
			}
		}

	}

	.new_item {
		width: calc(100% - 60upx);
		height: 100upx;
		background-color: #FFFFFF;
		margin: 0 auto;
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #e9e6e9;
		position: relative;

		input {
			width: 100upx;
			height: 100%;
			margin-left: 30upx;
			text-align: left;
		}
		text {
			min-width: 120upx;
		}

		image {
			position: absolute;
			top: 35upx;
			right: 30upx;
			width: 30upx;
		}
	}

	.btn {
		width: calc(100% - 60upx);
		height: 90upx;
		margin: 50upx auto;
		padding-bottom: 20px;

		button {
			width: 100%;
			height: 100%;
			background-color: #3fb8ff;
			color: #FFFFFF;
			border-radius: 45upx;
		}
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.operation {
			width: 580upx;
			height: 200upx;
			padding: 10upx 30upx;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;

			.radio {
				height: 60upx;
				margin-top: 30upx;
				font-size: 32upx;
				color: #666;

				radio {
					transform: scale(0.8);
					margin: 0 20upx;
				}
			}
		}
	}
	// 2021-1-29
	.news {
		margin-top: 20upx;
		.news_tip {
			font-size: 24upx;
			color: #999;
			padding: 20upx 30upx;
			background-color:#f6f6f6 ;
		}
		
		.new_item {
			text {
				min-width: 30upx;
				text-align: left;
				padding-left: 30upx;
			}
		}
	}
</style>
